<template>
  <div id="submitOrder">
    <TopSubfield>我是顶部</TopSubfield>
    <div class="indent">
      <div class="indent-top">
        <img class="indetImg" src="/static/img/signLogo.7c2198e.png" alt>
        <div class="process">
          <el-steps :active="active" finish-status="success">
            <el-step title="1 提交订单"></el-step>
            <el-step title="2 确认支付"></el-step>
            <el-step title="3 完成购买"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="accuracy">
        <div class="countWown">
          <i class="icon iconfont icon-time"></i>
          <p>
            请在
            <span>22:16:19</span>内支付完成，超时订单会自动取消
          </p>
        </div>
        <div class="project">
          <span>项目：橙子炖鸡</span>
          <p>
            应付金额￥
            <span>139.00</span>
          </p>
        </div>
        <div class="payment">
          <div class="payment-net">
            <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
              <el-tab-pane label="支付宝/微信" name="first">
                <el-radio v-model="radio" label="1">
                  <img class="selected" src="/static/images/pc_wxqrpay.png" alt>
                </el-radio>
                <el-radio v-model="radio" label="2">
                  <img class="selected" src="/static/images/alipaypcnew.png" alt>
                </el-radio>
                <div class="parcel">
                  <div class="hint-hot">
                    <p>支付￥
                      <span>88.00</span>
                    </p>
                  </div>
                  <div class="div-btns">
                    <el-button type="danger" @click="toPayFor">去支付</el-button>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="个人网银支付" name="second">
                <el-radio-group v-model="radio2">
                  <el-radio :label="item.radio2" v-for="(item,index) in bankCard" :key="index">
                    <img class="selected" :src="item.cardImg" alt>
                  </el-radio>
                  <div class="parcel">
                  <div class="hint-hot">
                    <p>支付￥
                      <span>88.00</span>
                    </p>
                  </div>
                  <div class="div-btns">
                    <el-button type="danger" @click="toPayFor">去支付</el-button>
                  </div>
                </div>
                </el-radio-group>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <bottomSynopsis>我是底部公共部分</bottomSynopsis>
  </div>
</template>

<script>
import TopSubfield from "@/components/top/TopSubfield"; //公共头部
import bottomSynopsis from "@/components/bottom/bottomSynopsis"; //公共底部
export default {
  name: "submitOrder",
  data() {
    return {
      active: 0,
      activeName2: "first",
      radio: "1",
      radio2: 3,
      bankCard: [
        { cardImg: "https://p0.meituan.net/pay/spdb.png", radio2: 3 },
        { cardImg: "https://p1.meituan.net/pay/bofc.png", radio2: 6 },
        { cardImg: "https://p2.meituan.net/pay/ccb.png", radio2: 9 },
        { cardImg: "https://p0.meituan.net/pay/boc.png", radio2: 12 }
      ]
    };
  },
  components: {
    TopSubfield,
    bottomSynopsis
  },
  methods: {
    toPayFor() {
      if (this.active++ > 2) this.active = 0;
      this.$router.push('/orderFulfillment')
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="less" scoped>
#submitOrder {
  width: 100%;
  background-color: #ffffff;
  .indent {
    width: 1340px;
    margin: 0 auto;
    padding-bottom: 100px;
    // 确认支付
    .accuracy {
      width: 100%;
      .countWown {
        height: 40px;
        line-height: 40px;
        margin-bottom: 20px;
        margin-top: 20px;
        background-color: #fff;
        box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        text-align: center;
        font-size: 14px;
        color: #666;
        i {
          color: #f60;
          font-size: 21px;
          vertical-align: middle;
          padding-right: 4px;
        }
        p {
          display: inline-block;
          vertical-align: middle;
          letter-spacing: 1px;
        }
      }
      .project {
        width: 100%;
        line-height: 24px;
        padding: 20px 0px;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        p {
          padding-right: 24px;
          font-size: 14px;
          color: #f60;
          span {
            font-size: 30px;
            padding-left: 4px;
          }
        }
        span {
          padding-left: 24px;
          font-size: 20px;
        }
      }
      .el-radio-group{
        display: block;
      }
      .payment {
        width: 100%;
        padding: 24px 0px;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        .payment-net {
          padding: 0px 20px;
          .selected {
            border: 1px solid #e5e5e5;
          }
          .selected:hover {
            border: 1px solid #f60;
          }
          .parcel {
            margin-top: 120px;
            .hint-hot {
              text-align: right;
              font-size: 14px;
              color: #f60;
              span{
                font-size: 30px;
                font-family: arial,sans-serif;
              }
            }
            .div-btns{
              text-align: right;
              .el-button{
                background-color: #f90;
                border-radius: 100px;
                background-image: linear-gradient(180deg,#ffa114,#f59300);
                font-size: 16px;
                padding: 14px 36px;
                border: none;
                margin-top: 20px;
              }
            }
          }
        }
      }
    }
    // 确认支付
    .indent-top {
      padding-top: 20px;
      .indetImg {
        display: inline-block;
        width: 165px;
        height: 57px;
        vertical-align: middle;
      }
      .process {
        width: 500px;
        padding-left: 80px;
        display: inline-block;
        vertical-align: middle;
        .el-steps--simple {
          background-color: #ffffff;
        }
      }
    }
  }
}
</style>

